<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    App

    <todo-header>
      <!-- 这是自定义默认插槽位置
      <span><a href="#">子标题链接</a></span> -->

      <template #default>
        <span><a href="#">子标题链接</a></span>
      </template>

      <template v-slot:title>
        <h3>待办事项</h3>
      </template>

      <template #subtitle>
        <h4>今日事, 今日毕!!!</h4>
      </template>
    </todo-header>
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>
    const todoHeader = {
      template: `
        <div class="header">
          <slot name="title">
            <div class="title">待办事项列表</div>
          </slot>
          <slot name="subtitle">
            <div class="subtitle">ToDoList...</div>
          </slot>
          <slot>
            <div>子标题的链接地址</div>
          </slot>
        </div>
      `,
    }

    const app = Vue.createApp({})
    app.component('todo-header', todoHeader)
    app.mount('#app')
  </script>
</body>
</html>